<template>
  <div>
    <!-- <van-button type="default" click=""> {{ result }}</van-button> -->

    <van-cell title="搜索" :value="resultText" @click="onSearch" />

    <van-popup v-model="show" position="bottom">
      <van-checkbox-group v-model="result">
        <van-cell-group
          v-for="(grp, grpIndex) in options"
          :key="grpIndex"
          :title="grp.string"
        >
          <van-cell
            v-for="(item, index) in grp.filters"
            :key="index"
            :title="item.string"
            clickable
            @click="toggle(grpIndex, index)"
          >
            <template #right-icon>
              <van-checkbox ref="checkboxes" :name="`${grpIndex}.${index}`" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'FilterForList',

  props: {
    value: { type: Array, default: () => [] },

    options: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      show: false
    }
  },

  computed: {
    //

    result: {
      get() {
        // console.log('get result', this.value)
        return this.value
      },
      set(val) {
        // console.log('set result', val)
        this.$emit('input', val)
      }
    },

    resultText() {
      const result2 = this.value
      const v2 = result2.reduce((acc, cur) => {
        // console.log('resultText', cur)
        const [n1, n2] = cur.split('.')
        const op = this.options[n1].filters[n2].string
        if (!acc[n1]) {
          acc[n1] = {}
        }
        acc[n1][n2] = op
        return acc
      }, {})
      // console.log('resultText v2', v2)
      const v3 = Object.values(v2)
        .map(item => {
          return Object.values(item).join('及')
        })
        .join(',')
      // console.log(v3)
      return v3
    }
  },

  async created() {
    //
  },

  mounted() {},

  methods: {
    onSearch() {
      //
      this.show = true
    },
    toggle(grpName, name) {
      // console.log('toggle', grpIndex, index, this.$refs.checkboxes)
      const index = this.$refs.checkboxes.findIndex(
        item => item.name === `${grpName}.${name}`
      )

      this.$refs.checkboxes[index].toggle()
    }
  }
}
</script>

<style type="text/css"></style>
